<!-- subpkg_consult/room/components/prescription-info.vue -->
<script lang="ts" setup>
// 接收组件外部传入的数据
import type { Prescription } from '@/types/room'

defineProps<{
  info: Prescription
}>()
</script>

<template>
  <!-- 处方消息（22） -->
  <view class="e-prescription">
    <!-- {{ info }} -->
    <view class="prescription-content">
      <view class="list-title">
        <view class="label">电子处方</view>
        <view class="extra">
          原始处方
          <uni-icons size="16" color="#848484" type="right" />
        </view>
      </view>
      <view class="list-item">{{ info.name }} {{ info.genderValue }} {{ info.age }}岁 {{ info.diagnosis }}</view>
      <view class="list-item">开方时间：{{ info.createTime }}</view>

      <view class="dividing-line"></view>

      <template v-for="item in info.medicines">
        <view class="list-title">
          <view class="label">
            <text class="name">{{ item.name }}</text>
            <text class="unit">{{ item.specs }}</text>
            <text class="quantity">{{ item.quantity }}</text>
          </view>
        </view>
        <view class="list-item">{{ item.usageDosag }}</view>
      </template>
    </view>
    <navigator class="uni-link" hover-class="none" :url="`/subpkg_medicine/payment/index?id=${info.id}`"> 购买药品 </navigator>
  </view>
</template>

<style lang="scss">
.e-prescription {
  width: 100%;
  margin-top: 60rpx;
  border-radius: 20rpx;
  background-color: #eaf8f6;

  .prescription-content {
    padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;
  }

  .list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10rpx;
  }

  .list-item {
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #848484;
  }

  .label {
    display: flex;
    justify-content: space-between;
    flex: 1;
    font-size: 32rpx;
    color: #121826;

    &.medicine {
      font-size: 30rpx;
      color: #666;
    }
  }

  .unit {
    width: 200rpx;
  }

  .extra {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #848484;
  }

  :deep(.uniui-right) {
    margin-top: 4rpx;
  }

  .dividing-line {
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #ededed;
  }

  .uni-link {
    text-align: center;
    line-height: 1;
    padding: 30rpx 0;
    color: #16c2a3;
    font-size: 32rpx;
  }
}
</style>
